<!--
 * @Author: your name
 * @Date: 2020-04-25 17:22:48
 * @LastEditTime: 2020-04-25 18:29:27
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \cloudEdu\src\views\personalCenter\pages\score.vue
 -->
<template>
  <div class="user-info page-exp">
    <pageHeader></pageHeader>
    <div class="user-content">
      <div class="user-title">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/personalcenter/index' }">个人中心</el-breadcrumb-item>
          <el-breadcrumb-item>积分</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div class="container">
        <div class="wrap">
          <el-select v-model="defineScoreClassify" placeholder="请选择积分类型">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
          <div class="list flex-rs" v-for="item in scores" :key="item.id">
            <div class="dots"></div>
            <p :title="item.desc">{{ item.desc }}</p>
            <span class="time" v-if="defineScoreClassify == '增加'">+{{ item.score }}积分</span>
            <span class="time" v-if="defineScoreClassify == '消耗'">-{{ item.score }}积分</span>
          </div>
          <div class="noData" v-if="scores.length == 0">暂无数据</div>
          <el-pagination
            v-if="scores.length > 0"
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="pagination.page"
            :page-size="pagination.limit"
            layout="total, prev, pager, next"
            :total="pagination.total"
          ></el-pagination>
        </div>
      </div>
    </div>
    <PageFooter></PageFooter>
  </div>
</template>

<script>
import pageHeader from "@/components/PageHeader.vue";
import PageFooter from "@/components/PageFooter.vue";
export default {
  components: {
    pageHeader,
    PageFooter
  },
  watch: {
    defineScoreClassify: {
      handler(val) {
        if (val == 1) {
          this.pagination.page = 0;
          this.getScoreList(1);
        } else {
          this.pagination.page = 0;
          this.getScoreList(2);
        }
      }
    }
  },
  data() {
    return {
      logoImg: require("@/assets/img/home/logo.png"),
      pagination: {
        page: 0,
        limit: 5,
        total: 0
      },
      defineScoreClassify: "增加",
      options: [
        { label: "增加", value: "1" },
        { label: "消耗", value: "2" }
      ],
      scores: []
    };
  },
  created() {
    this.getScoreList(1);
  },
  methods: {
    getScoreList(type) {
      let that = this;
      let time = new Date().valueOf();
      that
        .$http({
          url: "/wisdomlearn/score/v1/queryList",
          method: "post",
          headers: {
            accessToken: that.config.token,
            appId: that.config.appId,
            userId: JSON.parse(that.tool.getCookie("xinyun-front-userInfo")).userId,
            clientId: "",
            sign: that.tool.sign("/wisdomlearn/score/v1/queryList", time),
            timestamp: time
          },
          data: {
            index: that.pagination.page,
            count: that.pagination.limit,
            type: type,
            desc: "",
            startTime: "",
            endTime: ""
          }
        })
        .then(res => {
          if (res.retCode == "00000") {
            that.pagination.total = res.data.total;
            that.scores = res.data.scoreList;
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    handleSizeChange(val) {
      this.pagination.limit = val;
    },
    handleCurrentChange(val) {
      this.pagination.page = val;
      this.getScoreList();
    }
  }
};
</script>
<style scoped>
.user-info {
  min-width: 1200px;
}
.user-content {
  flex: 1;
  min-width: 1200px;
}
.user-title {
  width: 100%;
  height: 82px;
  background-color: #f0efef;
  font-family: PingFangSC-Medium;
  font-size: 21px;
  display: flex;
  align-items: center;
}
.user-title p {
  width: 1200px;
  margin: 0 auto;
}
.container {
  padding: 30px 0;
}
.container .wrap {
  width: 1200px;
  margin: 0 auto 0;
  background: #fff;
  padding: 0 10px 10px 10px;
}
.wrap .list {
  border-bottom: 1px solid #e1dede;
  padding: 25px 0;
}
.wrap .list .dots {
  width: 10px;
  height: 10px;
  background: #084dcd;
  border-radius: 50%;
}
.wrap .list p {
  font-size: 16px;
  color: #191a1d;
  letter-spacing: 0.09px;
  margin-left: 20px;
  width: 80%;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.wrap .list .time {
  margin-left: auto;
  font-size: 14px;
  color: #8b8b8d;
  letter-spacing: 0.08px;
}
.nomore {
  font-size: 18px;
  color: #616163;
  letter-spacing: 0.07px;
  text-align: center;
  margin: 20px 0 0 0;
}
</style>
<style>
.el-breadcrumb {
  width: 1200px;
  margin: 0 auto;
}
.user-info .el-select {
  width: 100px;
}
</style>
